<div class="layui-card">
    <div class="layui-breadcrumb" lay-filter="breadcrumb" style="padding: 0 15px;line-height: 50px;">
        <a lay-href="">概览</a>
        <a><cite>报表中心</cite></a>
        <a><cite lay-href="report/custom">自定义报表</cite></a>
        <a><cite>报表设计</cite></a>
    </div>
    <div class="luomi-title" style="margin-top: 10px;margin-left: -60px; display: flex;justify-content: center;"></div>
</div>

<!-- <div style="margin-top:30px;" class="container"> -->
    <div id="spreadsheet" style="box-shadow: 0 0 50px 10px rgb(0 0 0 / 10%);margin-left: 50%;transform: translateX(-50%);"></div>
<!-- </div> -->



<!-- 单行数据点 -->
<script type="text/html" template lay-done="layui.data.checkData(d.params)">
</script>

<script>
    layui.use(['admin', 'laytpl', 'form', 'laypage', 'layer', 'view',
        'setter', 'upload'
    ], function () {
        var $ = layui.$,
            admin = layui.admin,
            table = layui.table,
            laytpl = layui.laytpl,
            form = layui.form,
            laypage = layui.laypage,
            layer = layui.layer,
            view = layui.view,
            setter = layui.setter,
            tipsIndex = null;
        treeData = null;



        layui.data.checkData = function () {
            var data = layui.data('customItem-data').data
            $('.luomi-title').text(data.name + '设计' + "   id:" + data.id)

            layui.data('table',{
                key:'id',
                value:data.id
            })



            // 树形结构
            $.ajax({
                type: 'get',
                dataType: 'text',
                headers: {
                    Accept: "application/json; charset=utf-8"
                },
                url: 'http://www.iotddc.com/lmcomputer/bemFloorTree',
                data: {
                    token: 'EEAADD2299AAEE226677331177885599',
                    parentId: 100
                },
                success: function (data) {
                    treeData = data;
                }
            })

            // 自定义报表初始化
            admin.req({
                method: 'post',
                url: 'http://www.iotddc.com/IOTDDC/customreport/getCustomreport',
                data: {
                    token: 'EEAADD2299AAEE226677331177885599',
                    id: data.id,
                    DayMonthYear: 'day',
                    intime: '2021-09-23',
                    outime: '2021-09-23',
                    intimeday: '2021-09-23',
                    outimeday: '2021-09-23',
                    ExportExcel: '0'
                },
                done: function (res) {
                    // console.log(res);
                    var col = res.columnnumber ? res.columnnumber : 20
                    var row = res.rownumber ? res.rownumber : 24

                    // console.log(res.style);
                    // console.log(eval('[' + res.style + ']'));


                    var selectionActive = function (instance, x1, y1, x2, y2, origin) {
                        var cellName1 = jexcel.getColumnNameFromId([x1, y1]);
                        var cellName2 = jexcel.getColumnNameFromId([x2, y2]);
                        layui.data('table',{
                            key:'data',
                            value:{
                                cellName1:cellName1,
                                col1:x1,
                                row1:y1,
                                col2:x2,
                                row2:y2
                            }
                        })

                        x3 = x1;
                        y3 = y1;
                        x4 = x2;
                        y4 = y2;
                        console.log('选中了 ' + cellName1 + ' 至 ' +
                            cellName2 + '');
                        console.log('选中了' + x1, y1 + '至', x2, y2);
                    }

                    merge = function(){
                        var data = layui.data('table').data
                        // console.log(data.cellName1,data.col2-data.col1+1,data.row2-data.row1+1);
                        table.setMerge(data.cellName1,data.col2-data.col1+1,data.row2-data.row1+1)
                    }

                    unMerge = function(){
                        // console.log('取消合并');
                        var data = layui.data('table').data
                        table.removeMerge(data.cellName1)
                    }

                    borderFull = function(){
                        console.log(123);
                        for (var i=x3;i<=x4;i++){
                            for(var j=y3;j<=y4;j++){
                                cellName = jexcel.getColumnNameFromId([i, j]);
                                var cellstyle=table.getStyle(cellName)
                                // table.resetStyle(cellName)
                                cellstyle=cellstyle.replace("border-top: 1px solid rgb(0, 0, 0);","")
                                cellstyle=cellstyle.replace("border-left: 1px solid rgb(0, 0, 0);","")
                                cellstyle=cellstyle.replace("border-right: 1px solid rgb(0, 0, 0);","")
                                cellstyle=cellstyle.replace("border-bottom: 1px solid rgb(0, 0, 0);","")
                                cellstyle=cellstyle.replace("border-right: 1px solid rgb(0, 0, 0);","")
                                cellstyle=cellstyle.replace("border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);","")
                                cellstyle=cellstyle.trim()
                                var str=cellstyle.split(";")
                                for(var x=0;x<str.length;x++){
                                    // console.log(temp);
                                    var temp=str[x].split(":")
                                    if (temp.length>0 && temp[0]!=null && temp[1]!=null && temp[0]!="" && temp[1]!=""){
                                        //console.log("borderFull--for--x="+x+" "+temp[0]+" "+temp[1])
                                        // table.setStyle(cellName,temp[0].trim(),temp[1].trim())
                                        table.setStyle(cellName,'overflow','hidden')
                                        // table.setStyle(cellName,'text-overflow','ellipsis')
                                    }
                                }
                                table.setStyle(cellName,'border-top','1px solid #000')
                                table.setStyle(cellName,'border-left','1px solid #000')
                                table.setStyle(cellName,'border-right','1px solid transparen')
                                table.setStyle(cellName,'border-bottom','1px solid transparen')
                                if (i==x4){
                                    table.setStyle(cellName,'border-right','1px solid #000')
                                }
                                if (j==y4){
                                    table.setStyle(cellName,'border-bottom','1px solid #000')
                                }
		                    }
	                    }
                    }

                    borderNull = function(){
                        //console.log("x3="+x3+" x4="+x4+" y3="+y3+" y4="+y4)
                            for (var i=x3;i<=x4;i++){
                                for(var j=y3;j<=y4;j++){
                                    cellName = jexcel.getColumnNameFromId([i, j]);
                                    var cellstyle=table.getStyle(cellName)
                                    // console.log("cellstyle="+cellstyle)
                                    // table.setStyle(cellName,cellstyle)
                                    // console.log(cellstyle);
                                    // cellstyle=cellstyle.replace("border-top: 1px solid rgb(0, 0, 0);","")
                                    // cellstyle=cellstyle.replace("border-left: 1px solid rgb(0, 0, 0);","")
                                    // cellstyle=cellstyle.replace("border-right: 1px solid rgb(0, 0, 0);","")
                                    // cellstyle=cellstyle.replace("border-bottom: 1px solid rgb(0, 0, 0);","")
                                    // cellstyle=cellstyle.replace("border-right: 1px solid rgb(0, 0, 0);","")
                                    // cellstyle=cellstyle.replace("border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);","")
                                    cellstyle=cellstyle.trim()
                                    //console.log("cellstyle="+cellstyle)
                                    var str=cellstyle.split(";")
                                    for(var x=0;x<str.length;x++){
                                        var temp=str[x].split(":")
                                        if (temp.length>0 && temp[0]!=null && temp[1]!=null && temp[0]!="" && temp[1]!=""){
                                            console.log(temp[0]);
                                            if(temp[0].trim() == 'border-top' || temp[0].trim() == 'border-left' || temp[0].trim() == 'border-right' || temp[0].trim() == 'border-bottom' ||temp[0].trim() == 'border-style' || temp[0].trim() == 'border-color' || temp[0].trim() == 'border-width'){
                                                console.log(123);
                                                //console.log("for="+temp[0] +":"+ temp[1])
                                                table.setStyle(cellName,temp[0].trim(),temp[1].trim())
                                            }
                                        }
                                    }
                                }
	                        }
                    }

                    table = jspreadsheet(document.getElementById('spreadsheet'), {
                        data: [],
                        minDimensions: [col, row],
                        tableOverflow: true,
                        tableWidth: "1055px",
                        tableHeight: "auto",

                        // 选择事件
                        onselection: selectionActive,
                        toolbar: [{
                                type: 'i',
                                content: 'sava',
                                onclick: function () {
                                    var token = layui.data('layuiAdmin').token
                                    var id = layui.data('table').id
                                    var rows = table.getJson().length
                                    var columns = Object.getOwnPropertyNames(table.getJson()[0]).length
                                    var rowheightArr = [];
                                    for(var i = 0;i<rows;i++){
                                        if(i <= table.getHeight().length-1 && table.getHeight()[i] !== undefined){
                                            rowheightArr[i] = table.getHeight()[i].replace("px","")
                                        }else{
                                            rowheightArr[i] = null
                                        }
                                    }
                                    var rowheight = "["
                                    for(var i = 0 ; i< rowheightArr.length ; i++){
                                        if(rowheightArr[i] === null){
                                            rowheight  = rowheight + 'null' + ','
                                        }else{
                                            rowheight = rowheight + rowheightArr[i] + ','
                                        }
                                    }
                                    rowheight = rowheight.substr(0,rowheight.length -1) + ']'

                                    
                                    var columnwidthArr = [];
                                    for(var i = 0;i<columns;i++){
                                        if(i <= table.getWidth().length-1 && table.getWidth()[i] !== undefined){
                                            columnwidthArr[i] = (table.getWidth()[i]+ '').replace("px","")
                                        }else{
                                            columnwidthArr[i] = null
                                        }
                                    }
                                    var columnwidth = "["
                                    for(var i = 0 ; i< columnwidthArr.length ; i++){
                                        if(columnwidthArr[i] === null){
                                            columnwidth = columnwidth + 'null' + ','
                                        }else{
                                            columnwidth = columnwidth + columnwidthArr[i] + ','
                                        }
                                    }
                                    columnwidth = columnwidth.substr(0,columnwidth.length - 1) + ']'

                                    


                                    
                                    var merge = "{"
                                    for(key in table.getMerge()){
                                        var cell = jexcel.getIdFromColumnName(key,true)
                                        merge = merge + table.getMerge()[key][0] + "|" + table.getMerge()[key][1] + "|" + cell[0] + "|" + cell[1] + ","
                                    }
                                    merge = merge.substr(0,merge.length -1) + "}"

                                    // data
                                    var data = ""
                                    for(var i = 0 ; i < rows ; i ++){
                                        for(var j = 0 ; j<columns ; j ++){
                                            // console.log(table.getJson()[i][j]);
                                            if (table.getData()[i][j] !== ""){
                                                data = data + table.getData()[i][j] + "|" + j + "|"  + i + ","
                                            }
                                        }
                                    }
                                    data = data.substr(0,data.length -1)
                                    var style = "{"
                                    var getStyle = table.getStyle();
                                    for(var i = 0 ;i<columns;i++){
                                        for(var j = 0 ; j<rows;j++){
                                            style = style + getStyle[jexcel.getColumnNameFromId([i, j])] + "|" + i + "|" + j + '，'
                                        }
                                    }
                                    style = style.substr(0,style.length -1) + "}"

                                   
                                    
                                    // console.log(table.getStyle());
                                    // console.log(jexcel.getIdFromColumnName("A1",true));
                                    admin.req({
                                        method:'post',
                                        url:'http://www.iotddc.com/IOTDDC/customreport/SaveCustomreport',
                                        data:{
                                            token:'EEAADD2299AAEE226677331177885599',
                                            id:id,
                                            data:data,
                                            style:style,
                                            merge:merge,
                                            columnwidth:columnwidth,
                                            rowheight:rowheight,
                                            columns:columns,
                                            rows:rows
                                        },
                                        done:function(res){
                                            layer.msg(res.message)
                                        }
                                    })
                                }
                            },
                            {
                                type: 'i',
                                content: 'zujian-icon-06',
                                onclick: function (dom, options) {
                                    admin.popup({
                                        title: '单元格内容修改',
                                        area: ['1200px', '650px'],
                                        id: 'LAY-app_popup_computer',
                                        success: function (layero,
                                            index) {
                                            view(this.id).render(
                                                '/report/customPopup-computer', {
                                                    index: options.selectedContainer,
                                                    treeData
                                                }
                                            ).done(function () {
                                                form.on('submit(formDemo)',
                                                    data => {
                                                        // console.log(data.field.title);
                                                        // 表格更新
                                                        table.setValueFromCoords(options.selectedContainer[0], options.selectedContainer[1],'≡' + data.field.title)
                                                        layer.close(index)
                                                    })
                                            })

                                        }
                                    })
                                }
                            },
                            {
                                type:'i',
                                content:'hebingdanyuange1',
                                onclick:merge
                            },
                            {
                                type:'i',
                                content:'quxiaohebing',
                                onclick:unMerge
                            },
                            {
                                type:'i',
                                content:'jurassic_border-all',
                                onclick:borderFull,
                            },
                            {
                                type:'i',
                                content:'jurassic_border-none',
                                onclick:borderNull
                            },
                            {
                                type:'i',
                                content:'charuhang1',
                                onclick:function(){
                                    table.insertRow()
                                }
                            },
                            {
                                type:'i',
                                content:'charulie1',
                                onclick:function(){
                                    table.insertColumn()
                                }
                            },
                            {
                                type:'i',
                                content:'shanchuhang1',
                                onclick:function(dom,option){
                                    var rowNumber = option.selectedContainer[1]
                                    var numOfRows = option.selectedContainer[3] - option.selectedContainer[1] + 1
                                    table.deleteRow(rowNumber,numOfRows)
                                    // console.log(table.getData());
                                }
                            },
                            {
                                type:'i',
                                content:"shanchulie1",
                                onclick:function(dom,option){
                                    var columnNumber = option.selectedContainer[0]
                                    var numOfColumns = option.selectedContainer[2] - option.selectedContainer[0] + 1
                                    table.deleteColumn(columnNumber,numOfColumns)
                                    console.log(table.getData());
                                }
                            },
                            {

                                type: 'i',
                                content: 'chexiao',
                                onclick: function () {
                                    table.undo();
                                }
                            },
                            {
                                type: 'i',
                                content: 'zhongzuo',
                                onclick: function () {
                                    table.redo();
                                }
                            },

                            {
                                type: 'select',
                                k: 'font-size',
                                v: ['9px', '10px', '11px', '12px', '13px', '14px',
                                    '15px', '16px', '17px', '18px', '19px',
                                    '20px'
                                ]
                            },
                            {
                                type: 'i',
                                content: 'juyouduiqi',
                                k: 'text-align',
                                v: 'left'
                            },
                            {
                                type: 'i',
                                content: 'juzhongduiqi',
                                k: 'text-align',
                                v: 'center'
                            },
                            {
                                type: 'i',
                                content: 'juzuoduiqi',
                                k: 'text-align',
                                v: 'right'
                            },
                            {
                                type: 'i',
                                content: 'jiacu1',
                                k: 'font-weight',
                                v: 'bold'
                            },
                            {
                                type: 'color',
                                content: 'zitiyanse1',
                                k: 'color'
                            },
                            {
                                type: 'color',
                                content: 'beijingse',
                                k: 'background-color'
                            }
                        ],
                        // 设置列宽

                    })
                    // 设置列宽
                    if (res.columnnumber) {
                        var width = res.width.substring(1, res.width.length - 1).split(',')
                        layui.each(width, function (index, item) {
                            if (item !== 'null') {
                                table.setWidth(index, item)
                            }
                        })

                        // 设置行高
                        var height = res.height.substring(1, res.height.length - 1).split(',')
                        layui.each(height, function (index, item) {
                            if (item !== 'null') {
                                table.setHeight(index, item)
                            }
                        })

                        // 合并单元格
                        var merge = res.merge.substring(1, res.merge.length - 1).split(',')
                        if (merge[0] !== "}") {
                            layui.each(merge, function (index, item) {
                                item = item.split('|')
                                table.setMerge(jexcel.getColumnNameFromId([item[2],
                                        item[3]
                                    ]),
                                    item[0] - '0', item[1] - '0');
                            })
                        }

                        // 更新单元格取值
                        if(res.value != ''){
                        var value = res.value.split(',')
                        layui.each(value, function (index, item) {
                            let item_cell = item.split('|')
                            var item_cell_content = ''
                            if (item_cell.length > 3) {
                                for (let i = 0; i <= item_cell_length - 3; i++) {
                                    item_cell_content += item_cell[i]
                                }
                            } else {
                                item_cell_content = item_cell[0]
                            }
                            item_cell_row = item_cell[item_cell.length - 1];
                            item_cell_col = item_cell[item_cell.length - 2];


                            table.setValueFromCoords(item_cell_col, item_cell_row,
                                item_cell_content)
                        })
                    }

                   
                    }

                    // console.log(table.getStyle());

                    // // 设置表格样式
                    var styleMap=new Map();
                    if (res.style!=null && res.style!=""){
					    var style=res.style.replace("{", "")
				        style=style.replace("}","")
                        // console.log(style);
					    var style=style.split("，")
                        // console.log(style);
					for(var i=0;i<style.length;i++){
					  var str=style[i].split("|")
                    //   console.log(str);
					  cellName = jexcel.getColumnNameFromId([str[1], str[2]]);
					//   console.log(cellName+" "+str[1]+str[2]+str[0])
					  var stylepm=str[0].split(";")
                    //   console.log(stylepm);
					  for(var j=0;j<stylepm.length-1;j++){
					    var kv=stylepm[j].split(":")
                        // table.setStyle(cellName,kv[0].trim(),kv[1].trim())
					    if (kv.length>0 && kv[0]!=null && kv[1]!=null && kv[0]!="" && kv[1]!=""){
					    		//console.log(cellName+"=("+kv[0].trim()+")"+":("+kv[1].trim()+")")
					    	if (kv[0].trim()=="border-top"){
					    		table.setStyle(cellName,'border-top','1px solid #000')
					    	}else if (kv[0].trim()=="border-left"){
					    		table.setStyle(cellName,'border-left','1px solid #000')
					    	}else if (kv[0].trim()=="border-right"){
					    		table.setStyle(cellName,'border-right','1px solid #000')
					    	}else if (kv[0].trim()=="border-bottom"){
					    		table.setStyle(cellName,'border-bottom','1px solid #000')
					    	}else if (kv[0].trim()=="border-width"){
					    		//console.log("kv[0].trim()=="+kv[0].trim())
					    		table.setStyle(cellName,'border-top','1px solid #000')
					    		table.setStyle(cellName,'border-left','1px solid #000')
					    		table.setStyle(cellName,'border-right','1px solid #000')
					    		table.setStyle(cellName,'border-bottom','1px solid #000')
					    	}else if (kv[0].trim()=="background-color" || kv[0].trim()=="color" || (kv[0].trim()=='text-align' && kv[1].trim()!='center')|| kv[0].trim()=='font-weight' || kv[0].trim()=='font-size' ){  //颜色
                                // console.log(cellName,kv);  // 当前要加样式的单元格编号 要加的样式:[什么样式,值]
					    		var flag=0;
                                // console.log(res.merge);  
					    		if (res.merge!=null && res.merge!="" && res.merge!=undefined){
                                    // console.log(merge);  // [合并列数,合并行数,列号,行号]
                                    // console.log(str[1],str[2]); // 当前要改变样式的 行号,列号
						    		for(var x=0;x<merge.length;x++){
	//					    			console.log("merge1.length="+merge1.length)
						    			var str1=merge[x].split("|")
                                        // console.log(str1); 
                                        // console.log(str[1],str1[2]);
	//					    			console.log("merge1.length="+str[1]+">="+str1[2]+" "+str[1]+"<="+(parseInt(str1[2])+parseInt(str1[0])-1)+" "+ 
	//					    				   str[2]+">="+str1[3]+" "+ str[2]+"<="+(parseInt(str1[3])+parseInt(str1[1])-1))
						    			if (parseInt(str[1])>=parseInt(str1[2]) && parseInt(str[1])<=(parseInt(str1[2])+parseInt(str1[0])-1) && 
						    				   parseInt(str[2])>=parseInt(str1[3]) && parseInt(str[2])<=(parseInt(str1[3])+parseInt(str1[1])-1)){
						    			  flag=1;
						    			  cellName1 = jexcel.getColumnNameFromId([str1[2], str1[3]]);
                                        //   console.log(cellName1); // 要合并的整号
						    			  //console.log(cellName1+"--"+jexcel.getColumnNameFromId([(parseInt(str1[2])+parseInt(str1[0])-1), (parseInt(str1[3])+parseInt(str1[1])-1)])+":"+kv[0].trim()+" "+kv[1].trim())
						    			  //console.log(kv[0].trim()=="color")
						    			  //console.log(styleMap[cellName1+'color']==undefined)
						    			  //console.log(kv[1].trim()!="rgb(0, 0, 0)")
						    			  if (kv[0].trim()=="color" && styleMap[cellName1+'color']==undefined && kv[1].trim()!="rgb(0, 0, 0)"){
						    			  	//console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
							    			  styleMap[cellName1+'color']=1
							    			  table.setStyle(cellName1,kv[0].trim(),kv[1].trim())
							    			  //break;
						    			  }
                                          if (kv[0].trim()=="text-align" && styleMap[cellName1+'text-align']==undefined){
						    			  	//console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
							    			  styleMap[cellName1+'text-align']=1
							    			  table.setStyle(cellName1,kv[0].trim(),kv[1].trim())
							    			  //break;
						    			  }
                                          if (kv[0].trim()=="font-weight" && styleMap[cellName1+'font-weight']==undefined){
						    			  	//console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
							    			  styleMap[cellName1+'font-weight']=1
							    			  table.setStyle(cellName1,kv[0].trim(),kv[1].trim())
							    			  //break;
						    			  }
                                          if (kv[0].trim()=="font-size" && styleMap[cellName1+'font-size']==undefined){
						    			  	//console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
							    			  styleMap[cellName1+'font-size']=1
							    			  table.setStyle(cellName1,kv[0].trim(),kv[1].trim())
							    			  //break;
						    			  }
						    			  if (kv[0].trim()=="background-color" && styleMap[cellName1]==undefined && kv[1].trim()!="rgb(0, 0, 0)"){
						    			  	//console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
							    			  styleMap[cellName1]=1
							    			  table.setStyle(cellName1,kv[0].trim(),kv[1].trim())
							    			  //break;
						    			  }
                                          
						    			}
							      }
                                //   console.log('----');
						    		if (flag==0){
						    			//console.log(cellName+":"+kv[0].trim()+" "+kv[1].trim())
						    			table.setStyle(cellName,kv[0].trim(),kv[1].trim())
						    		}
								  }else{
                                    table.setStyle(cellName,kv[0].trim(),kv[1].trim())
								  }
					    	}else if (kv[0].trim()!="border-style" && kv[0].trim()!="border-color" && kv[0].trim()+kv[1].trim()!="text-aligncenter"){
					  			table.setStyle(cellName,kv[0].trim(),kv[1].trim())
					  		}
					  	}
					 }
					}
				}


                
                }
            });








        }




    });
</script>